<template>
  <div class="nav" :class="!sidebar ? 'nav-w' : 'nav-w1'">
    <!-- {{sidebar}} -->
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo mynav"
      background-color="#0d2439"
      text-color="#fff"
      active-text-color="rgb(105,179,255)"
      :router="true"
      :unique-opened="true"
      :collapse="sidebar"
    >
      <el-submenu
        v-for="item in routes"
        :key="item.path"
        :index="item.path"
        v-show="item.meta.type == type || type == '1'"
      >
        <template slot="title">
          <i class="iconfont" :class="item.meta.icon"></i>
          <span>{{ item.meta.title }}</span>
        </template>
        <el-menu-item
          v-for="i in item.children"
          :index="item.path + '/' + i.path"
          :key="item.path + '/' + i.path"
          >{{ i.meta.title }}</el-menu-item
        >
      </el-submenu>

      <el-submenu index="7">
        <template slot="title">
          <i class="iconfont icon-d-right-arrow"></i>
          <span>server</span>
        </template>
        <el-menu-item index="7-1">11111</el-menu-item>
        <el-menu-item index="7-2">22222</el-menu-item>
      </el-submenu>

      <el-submenu index="8">
        <template slot="title">
          <i class="iconfont icon-d-right-arrow"></i>
          <span>demo</span>
        </template>
        <el-menu-item index="8-1">11111</el-menu-item>
        <el-menu-item index="8-2">22222</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Sidebar',
  data () {
    return {
      routes: []
    }
  },
  computed: {
    ...mapGetters(['sidebar', 'type'])
  },
  created () {
    console.log(this.$router)
    // 获取路由数据，重组，保存到本地变量
    const routes = []
    this.$router.options.routes.forEach((item) => {
      if (item.meta) {
        routes.push(item)
      }
    })
    this.routes = routes
    console.log(routes)
  }
}
</script>

<style scoped>
.el-menu {
  border-right: none;
}
.nav {
  /* width: 150px; */
  background: rgb(13, 36, 57);
  overflow: hidden;
}
.nav-w {
  width: 150px;
}
.nav-w1 {
  width: 64px;
}
.iconfont {
  font-size: 18px;
  margin-right: 10px;
}
</style>
